import React from 'react';
import { Tag as AntdTag } from 'antd';
import type { TagProps as AntdTagProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TagProps extends AntdTagProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  tag: css`
    border-radius: ${token.borderRadius}px;
  `,
}));

const TagComponent = React.forwardRef<HTMLElement, TagProps>(({ customClassName, className, ...restProps }, ref) => {
  const { styles, cx } = useStyles();
  
  const tagClassName = cx(
    className,
    customClassName,
    styles.tag
  );

  return <AntdTag ref={ref as any} className={tagClassName} {...restProps} />;
});

// 创建复合组件
type TagType = typeof TagComponent & {
  CheckableTag: typeof AntdTag.CheckableTag;
};

const Tag = TagComponent as TagType;

// 导出子组件
Tag.CheckableTag = AntdTag.CheckableTag;

export { Tag };
export default Tag;

